<template>
	<view :style="{background:pageColor}" v-if="isLoad">
		<block v-if="detail.join_id">
			<view class="sign-qr flex-center flex-column" v-if="options.is_code">
				<image class="sign-qr-cover radius-16" :src="detail.qr_url" mode="aspectFill"></image>
				<view class="f-desc c-paragraph" style="padding-top: 16rpx;">请出示二维码给局主签到</view>
			</view>
			<view class="flex-center" style="height: 230rpx;" v-else>
				<view class="c-paragraph" v-if="detail.is_sign">该成员已经签到过啦~</view>
				<view v-else class="sign-qr-btn f-mini-title c-base flex-center" :style="{background: primaryColor}" @tap="signIn">确认签到</view>
			</view>
			<view class="ml-md mr-md radius-32 fill-base pd-lg partner-info">
				<view class="flex-between">
					<image :src="detail.cover" mode="aspectFill" class="cover radius-16"></image>
					<view class="flex-1 pl-md">
						<view class="f-mini-title text-bold ellipsis max-450">{{detail.title}}</view>
						<view class="flex-y-baseline" style="color: #FF3C6E;padding-top: 24rpx;" v-if="detail.money_type == 3">
							<text>¥</text>
							<text class="f-md-title text-bold">{{detail.join_price}}</text>
							<text class="f-desc">/人</text>
						</view>
						<view style="color: #FF3C6E;padding-top: 24rpx;" v-else>免费</view>
					</view>
				</view>
				<view class="pt-lg flex-y-center b-1px-b" style="padding-bottom: 25rpx;">
					<view class="left-icon flex-y-center">
						<i class="iconfont iconshijianguanli text-bold"></i>
					</view>
					<view class="flex-y-center f-desc text-bold">
						{{$util.formatTime(detail.start_time*1000,'YY.M.D h:m')}} - {{$util.formatTime(detail.end_time*1000,'YY.M.D h:m')}}
					</view>
				</view>
				<view class="pt-lg flex-y-center rel">
					<view class="left-icon flex-y-center">
						<i class="iconfont icondizhiguanli3 text-bold" style="font-size: 18px;"></i>
					</view>
					<view class="flex f-desc text-bold">
						<!-- <text class="pr-sm">12km</text> -->
						<view class="max-400 ellipsis">{{detail.address}}</view>
					</view>
					<image @tap.stop="toMap" class="addr-icon abs" src="https://www.peikangbao.cn/admin/anmo/partner/partner-addr.png" mode="aspectFill"></image>
				</view>
				<view class="pt-sm f-desc" style="color: #A3A3A3;padding-left: 151rpx;" v-if="detail.address_info">({{detail.address_info}})</view>
			</view>
			<view class="mt-md ml-md mr-md pl-lg pr-lg fill-base radius-16">
				<view class="f-title text-bold" style="padding-top: 26rpx;">报名信息</view>
				<view class="form-item b-1px-b flex-between">
					<view class="form-item-title text-bold f-desc">昵称</view>
					<view class="f-desc text-bold flex-1">{{detail.nickName || ''}}</view>
				</view>
				<view class="form-item b-1px-b flex-between">
					<view class="form-item-title text-bold f-desc">手机号</view>
					<view class="f-desc text-bold flex-1">{{detail.phone}}</view>
				</view>
				
				<block v-for="(item,index) in detail.field" :key="index">
					<view class="form-item b-1px-b" v-if="item.type == 3">
						<view class="form-item-title text-bold f-desc h-90 flex-y-center">{{item.name}}</view>
						<view class="pb-lg">
							<upload @upload="imgUpload($event, index)" :imagelist="[{path: item.value}]" imgtype="value" :isEdit="false"
								text="上传图片" :imgsize="1">
							</upload>
						</view>
					</view>
					
					<view class="form-item b-1px-b flex-between" v-if="item.type == 2">
						<view class="form-item-title text-bold f-desc pr-md">{{item.name}}</view>
						<view class="f-desc text-bold flex-1">{{item.value}}</view>
					</view>
					
					<view class="form-item b-1px-b flex-between" v-if="item.type == 1">
						<view class="form-item-title text-bold f-desc pr-md">{{item.name}}</view>
						<view class="f-desc text-bold flex-1">{{item.value}}</view>
					</view>
				</block>
				
			</view>
			<view class="mt-md radius-16 fill-base pl-lg pr-lg pb-lg ml-md mr-md" v-if="detail.text">
				<view class="flex-y-center text-bold f-title h-90">报名备注</view>
				<view class="c-paragraph" style="white-space: pre-line;">{{detail.text}}</view>
			</view>
			<view class="mt-md radius-16 fill-base pl-lg pr-lg pb-lg ml-md mr-md">
				<view class="flex-y-center text-bold f-title h-90">报名须知</view>
				<view class="c-paragraph">
					1、活动报名后，在活动开始前{{detail.sign_start_minute | handleTime}}个小时将无法取消<br/>
					2、报名成功后可在个人中心-组局记录里进行查看<br/>
					3、活动开始前参与人出示签到码，局主扫码核销<br/>
					4、若未参加活动请及时取消报名，否则会扣取相应费用<br/>
					5、取消报名或者局主驳回报名申请后，报名费用将在24小时内原路退回
				</view>
			</view>
			
			<view class="space-footer"></view>
		</block>
		<block v-if="detail == 201">
			<abnor :isCenter="true" :tip="[{text: '活动不一致，暂无权限核销签到'}]"></abnor>
		</block>
		
		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				options: {},
				isLoad: false,
				detail: {},
				bgColor: ''
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		async onLoad(options) {
			options = await this.updateCommonOptions(options)
			this.options = options
			this.$util.showLoading()
			this.initIndex()
		},
		filters: {
			handleTime(val){
				let time = {
					30: '半',
					60: 1,
					120: 2
				}
				return time[val]
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'updateCommonOptions']),
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				await this.getConfigInfo()
				
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.bgColor = this.$util.rgbColor(this.primaryColor, 0.1)
				this.getDetail()
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			async getDetail(){
				let {
					id = 0,
					is_code = '',
					join_id = 0
				} = this.options
				if(join_id > 0){
					id = join_id
				}
				let param = {
					join_id: id
				}
				if(is_code != ''){
					param.is_code = 0
				}
				
				let data = await this.$api.partner.getJoinInfo(param)
				this.detail = data
				this.$util.hideAll()
				this.isLoad = true
			},
			// 查看定位
			async toMap() {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif
				let {
					address,
					lat,
					lng
				} = this.detail
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude: lat * 1,
					longitude: lng * 1,
					name: address,
					scale: 28
				})
			},
			countEnd(e){},
			async signIn(){
				await this.$api.partner.partnerSign({join_id: this.detail.join_id})
				this.$util.showToast({
					title: `核销成功`
				})
				setTimeout(()=>{
					this.$util.goUrl({url: `/pages/partner`, openType: 'redirectTo'})
				},1500)
			}
		}
	}
</script>


<style lang="scss">
	.partner-info{
		.cover{
			width: 176rpx;
			height: 134rpx;
		}
		.detail-money-type{
			width: 68rpx;
			height: 36rpx;
			border-radius: 36rpx;
			border: 1px solid transparent;
		}
		.detail-time{
			height: 80rpx;
			background: #F8F5FF;
		}
		.left-icon{
			width: 65rpx;
		}
		.addr-icon{
			width: 69rpx;
			height: 69rpx;
			border-radius: 69rpx;
			right: 15rpx;
			top: 14rpx;
		}
	}
	.form-item{
		min-height: 96rpx;
		.form-item-title{
			min-width: 110rpx;
		}
		.form-item-input{
			height: 96rpx;
		}
		.form-item-btn{
			width: 150rpx;
			height: 60rpx;
			border-radius: 60rpx;
			border: 1px solid transparent;
		}
	}
	.form-item-textarea{
		height: 180rpx;
		width: 590rpx;
	}
	.h-90{
		height: 90rpx;
	}
	.footer-box{
		height: 120rpx;
		.footer-box-btn{
			width: 283rpx;
			height: 90rpx;
			border-radius: 90rpx;
		}
	}
	.sign-qr{
		padding: 40rpx 0 80rpx 0;
		.sign-qr-cover{
			width: 320rpx;
			height: 320rpx;
		}
	}
	.sign-qr-btn{
		width: 381rpx;
		height: 90rpx;
		border-radius: 90rpx;
	}
</style>